import React, { Suspense }  from "react";
import { LoadingOutlined } from '@ant-design/icons';
import { Route } from "react-router-dom";
import {routers, routerStage} from './router'

const targetRouteList = routerStage.map(r=>({
  ...r,
  path:`/target-${r.path}`
}))
const schemeRouteList = routerStage.map(r=>({
  ...r,
  path:`/scheme-${r.path}`
}))
const projectRouteList = routerStage.map(r=>({
  ...r,
  path:`/project-${r.path}`
}))
const sysRouteList = routerStage.map(r=>({
  ...r,
  path:`/sys-${r.path}`
}))
const taskRouteList = routerStage.map(r=>({
  ...r,
  path:`/task-${r.path}`
}))
const implementRouteList = routerStage.map(r=>({
  ...r,
  path:`/implement-${r.path}`
}))
const operateRouteList = routerStage.map(r=>({
  ...r,
  path:`/operate-${r.path}`
}))
const routeList = [...routers, ...targetRouteList, ...schemeRouteList,...projectRouteList, ...sysRouteList, ...taskRouteList,...implementRouteList, ...operateRouteList]
export default () => (
    <Suspense fallback={<LoadingOutlined />}>
      {
        routeList.map((r, index) => {
          const {props} = r;
          return (
            <Route exact path={r.path} key={index} 
            component={r.components}
            // render={(props)=><r.component key={props.match.params.type} {...props} />}
            />
          )
        })
      }
    </Suspense>
)